<script setup lang="ts">
import { useCategoryStore } from "@/stores/categoryStore";
import GoodsItem from "./GoodsItem.vue";
import XtxMore from "../../../components/XtxMore.vue";
import { onBeforeRouteUpdate } from "vue-router";

// 获取用于存储分类信息的 store 对象
const categoryStore = useCategoryStore();

// 获取路由信息对象
const route = useRoute();
// // 获取当前一级分类的具体信息
// const topCategory = computed(() => {
//   // 获取当前一级分类的id
//   const id = route.params.id as string;
//   // 根据一级分类id 获取分类信息
//   let topCategory = categoryStore.topCategories.result[id];
//   // 返回一级分类信息
//   return topCategory;
// });
const { topCategories } = storeToRefs(categoryStore);
const { getTopCategoryById } = categoryStore;
getTopCategoryById(route.params.id as string);
// 监听路由变化 当路由发生变化以后重新获取数据
onBeforeRouteUpdate((to) => {
  // to 目标路由信息对象
  getTopCategoryById(to.params.id as string);
});
</script>
<template>
  <div v-if="topCategories.status === `success`">
    <div
      class="ref-goods"
      v-for="subCategory in topCategories.result[route.params.id as string].children"
    >
      <div class="head">
        <h3>- {{ subCategory.name }} -</h3>
        <p class="tag">温暖柔软，品质之选</p>
        <XtxMore />
      </div>
      <div class="body">
        <GoodsItem
          :goods="goods"
          v-for="goods in subCategory.goods"
          :key="goods.id"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.ref-goods {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }
  .head {
    .xtx-more {
      position: absolute;
      top: 20px;
      right: 20px;
    }
    .tag {
      text-align: center;
      color: #999;
      font-size: 20px;
      position: relative;
      top: -20px;
    }
  }
  .body {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 65px 30px;
  }
}
</style>
